<template>
    <div class="order">
        <h1>订单管理</h1>
        <div class="content">
            <div class="form">

                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <el-input class="inp" placeholder="请输入内容" v-model="pages.searchVal"></el-input>
                <el-button size="mini" @click="search">查询</el-button>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column prop="orderNo" label="订单号">
                    </el-table-column>
                    <el-table-column prop="receiverName" label="收件人">
                    </el-table-column>
                    <el-table-column prop="statusDesc" label="订单状态">
                    </el-table-column>
                    <el-table-column prop="payment" label="订单总价">
                        <template slot-scope="scope">
                            ￥{{ scope.row.payment }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pages.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pages.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="page">
            </el-pagination>


        </div>
    </div>
</template>

<script>
import { getOrder, orderSearch } from '@/utils/API'
export default {
    data() {
        return {
            options: [{ value: 'id', label: '按商品id搜索' }],
            value: '',
            pages: {
                searchVal: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            total: 10,
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.render()
        },
        handleCurrentChange(val) {
            this.pages.pageNum = val
            this.render()
        },
        search() {
            console.log(this.value);
            if (!this.pages.searchVal || this.value == "") {
                alert('输入内容或者选择条件为空')
                this.render()
                return
            }
            orderSearch({ orderNo: this.pages.searchVal }).then(res => {
                console.log(res);
                // console.log(res.data.data.list);
              
                    this.tableData = res.list
               
            })
            this.pages.searchVal = ""
        },
        handleClick(item) {
            // console.log(item.orderNo);
            this.$router.push(`/Orderdetail/${item.orderNo}`)
         },
        render() {
            getOrder(this.pages).then(res => {
                console.log(res);
                // console.log(res.data.data.total);
                this.total = res.total
                this.tableData = res.list
            })
        }
    },
    mounted() {
        this.render()
    },
    // updated() {
    //     this.$store.state.order = this.total
    // },
}
</script>

<style lang="scss" scoped>
.order {
    width: 100%;
    height: 100vh;

    h1 {
        font-weight: normal;
        font-size: 40px;
    }

    .content {
        margin-top: 10px;

        .form {
            display: flex;

            .inp {
                width: 300px;
            }
        }

        .table {
            margin-top: 10px;
        }
    }
}
</style>
